<template>
  <div>
    <div class="search">
      <el-row :gutter="20" class="Num1">
        <el-col :span="9"
          ><div class="grid-content type">
            地址：<el-input size="small" maxlength="18" v-model="postmessage.location"></el-input></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content number">
            事项编号：<el-input size="small" maxlength="18" v-model="postmessage.number"></el-input></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-select @change="getstatus" v-model="statusList" placeholder="所有状态" size="small">
              <el-option v-for="item in option" :key="item.id" :label="item.label" :value="item.value"> </el-option>
            </el-select></div
        ></el-col>
      </el-row>
      <el-row :gutter="20" class="Num2">
        <el-col :span="9">
          <div class="block">
            时间：
            <el-date-picker
              v-model="value2"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="getDate"
              align="right"
              size="small"
            >
            </el-date-picker></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content type">
            问题类型：<el-select v-model="postmessage.typeId" placeholder="请选择" size="small">
              <el-option v-for="item in problem" :key="item.id" :label="item.typeName" :value="item.id"> </el-option>
            </el-select></div
        ></el-col>
        <el-col :span="2"
          ><div class="grid-content bg-purple">
            <el-button type="primary" size="small" @click="search">搜索</el-button>
          </div></el-col
        >
        <el-col :span="2"
          ><div class="expor">
            <el-button class="" type="primary" @click="expor" size="small">导出excel</el-button>
          </div></el-col
        >
      </el-row>
    </div>
    <div class="form">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="number" label="事项编号" align="center"> </el-table-column>
        <el-table-column prop="subTypeName" label="问题类型" align="center" width="100"> </el-table-column>
        <el-table-column prop="createTime" label="上报时间" align="center"> </el-table-column>
        <el-table-column prop="location" label="事件地点" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="mdescribe" label="问题描述" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="statusName" label="事项状态" align="center"> </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="blockR">
      <el-pagination layout="prev, pager, next" :total="total * 10" @current-change="changesize" class="page">
      </el-pagination>
    </div>
    <el-drawer title="事项详情" :visible.sync="drawer" :direction="direction" size="55%" :close-on-press-escape="true">
      <!-- 待核实 -->
      <completed :childmessage="this.parentMessage" :win-state="drawer" v-if="state == 1"></completed>
      <!-- 待派遣，待处置，已作废，退回待核实 -->
      <Waiting
        :childmessage="this.parentMessage"
        :win-state="drawer"
        v-if="state == 6 || state == 7 || state == 3 || state == 5"
      ></Waiting>
      <!-- 已办结 -->
      <verify :childmessage="this.parentMessage" :win-state="drawer" v-if="state == 4"></verify>
      <!-- 办结状态2 -->
      <second :childmessage="this.parentMessage" :win-state="drawer" v-if="state == 99"></second>
    </el-drawer>
  </div>
</template>

<script>
import completed from './completed/index.vue'
import second from './second/index.vue'
import Waiting from './Waiting/index.vue'
import verify from './verify/index.vue'
import api from '@/api/api'
import Seats from '@/api/Seats'
import lndividualAccount from '@/mock/lndividualAccount.json'
export default {
  data() {
    return {
      statusList: [],
      total: '',
      totalRecord: 0,
      state: '',
      parentMessage: {},
      drawer: false,
      direction: 'rtl',
      value2: '',
      postmessage: {
        dutyId: '',
        endTime: '',
        location: '',
        number: '',
        pageNo: 1,
        pageSize: 7,
        responsibilityId: '',
        seatId: '',
        startTime: '',
        statusList: [],
        subTypeId: '',
        typeId: '',
      },

      option: [],
      problem: [],
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }
  },
  methods: {
    expor() {
      let obj = JSON.parse(JSON.stringify(this.postmessage))
      obj.pageSize = this.totalRecord
      api.accountExport(obj).then(res => {
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        let elink = document.createElement('a')
        elink.download = '个人台账数据.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
      })
    },
    getclassification() {
      Seats.classification().then(res => {
        this.problem = res.data
      })
    },
    getstatus(val) {
      this.postmessage.statusList = [val]
    },
    searchlist() {
      api.selectstatus(this.postmessage).then(res => {
        this.total = res.data.totalPage
        this.totalRecord = res.data.totalRecord
        this.tableData = res.data.records
      })
    },
    handleClick(scope) {
      if (scope.status == 4) {
        if (scope.responsibilityId == 0) {
          this.state = scope.status
        } else {
          this.state = 99
        }
      } else {
        this.state = scope.status
      }
      this.drawer = true
      this.parentMessage = scope
    },
    getDate(date) {
      this.value2 = date
      this.postmessage.startTime = this.value2[0]
      this.postmessage.endTime = this.value2[1]
    },
    changesize(row) {
      this.postmessage.pageNo = row
      this.searchlist()
    },
    search() {
      api.selectstatus(this.postmessage).then(res => {
        this.total = res.data.totalPage
        this.totalRecord = res.data.totalRecord
        this.tableData = res.data.records
        if (res.data.records == [] || res.data.records.length == 0) {
          this.$message({
            message: '查询数据无结果！',
            type: 'info',
          })
        }
      })
    },
  },
  created() {
    this.option = lndividualAccount
    this.searchlist()
    this.getclassification()
  },
  mounted() {
    let currentTimer = setInterval(() => {
      api.selectstatus(this.postmessage).then(res => {
        this.total = res.data.totalPage
        this.totalRecord = res.data.totalRecord
        this.tableData = res.data.records
      })
    }, 60000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(currentTimer)
      currentTimer = null
    })
  },
  components: {
    completed,
    Waiting,
    verify,
    second,
  },
}
</script>

<style lang="scss" scoped>
@import './chat-line-square.scss';
</style>
